<!-- 编辑特征 -->
<template>
  <div>
    <a-modal
      :title="$t('Edit-feature')"
      v-model="modalVisible"
      width='30%'
      @ok='handleSubmit'
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form="form">
        <a-form-item :label="$t('Region-name')" v-bind="formLayout">
          <a-checkbox-group 
            v-decorator="['area_name',{rules:[],initialValue:baseInfo && baseInfo.features_name},]"
            :options="areaOptions"
            @change="handleChangeFeature"
          />
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleReset" class="submit-btn">
          {{$t('Reset')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "EditBlock",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetBlock: {
      type: Object,
      required: true
    },
    baseInfo: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },
  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
      areaOptions: [
        { label: 'layering', value: 'layering', disabled: true },
        { label: 'exclusive-lock', value: 'exclusive-lock', disabled: true },
        { label: 'object-map', value: 'object-map', disabled: false },
        { label: 'fast-diff', value: 'fast-diff', disabled: false },
        { label: 'deep-flatten', value: 'deep-flatten', disabled: false },
      ],
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
      this.handleFeatureRule();
    }
  },

  methods: {
    // 处理特征选项的规则
    handleFeatureRule() {
      // 如果没有 deep-flatten，则禁用，该选项只允许取消不能添加
      if(this.baseInfo.features_name && this.baseInfo.features_name.indexOf('deep-flatten') === -1) {
        this.areaOptions[4].disabled = true;
      }
      // object-map和fast-diff只允许取消，不允许新增，并且互相绑定，取消，两个一起取消，选定，两个一起选定
      if(this.baseInfo.features_name && (this.baseInfo.features_name.indexOf('object-map') === -1 || this.baseInfo.features_name.indexOf('fast-diff') === -1)) {
        this.areaOptions[2].disabled = true;
        this.areaOptions[3].disabled = true;
      }
    },

    // 获取当前改变的值
    getNowCheck(arr1, arr2) {
      let finalArr = []
      // 将数组中相同的去掉
      if(arr1.length > arr2.length) {
        finalArr = arr1.filter(item => !arr2.includes(item));
      }else {
        finalArr = arr2.filter(item => !arr1.includes(item));
      }
      return finalArr;
    },
    // 同步修改fast-diff和object-map
    syncChangeCheck(value, value1, value2) {
      let newValue = []; 
      if(value.indexOf(value1) === -1) {
        newValue = [...value];
        newValue.splice(value.indexOf(value2),1);
      }else {
        newValue = [value2, ...value];
      }
      return newValue
    },

    // 处理特征多选框选择
    handleChangeFeature(value) {
      // 出掉重复元素，获取当前改变的是哪个
      let oldArr = this.form.getFieldValue('area_name');
      let newArr = value;
      const nowCheck = this.getNowCheck(oldArr, newArr)[0];
      let newValue = [];
      if(nowCheck==='fast-diff') {
        newValue = this.syncChangeCheck(value, 'fast-diff', 'object-map');
      }else if(nowCheck==='object-map') {
        newValue = this.syncChangeCheck(value, 'object-map', 'fast-diff');
      }else {
        newValue = [...value];
      }
      this.$nextTick(() => {
        this.form.setFieldsValue({
          area_name: newValue
        })
      })
    },

    //提交编辑特征
    handleSubmit() {
      this.form.validateFields(async (err,value)=>{
        if(!err) {
          this.submitLoading = true;
          const params = {
            pool_id: this.targetBlock.pool_id,
            image_id: this.targetBlock.id,
            feature_name: value.area_name,
          }
          try {
            const res = await this.$api.blockInfo.editBlockFeatureRequest(params)
            console.log('提交编辑特征', res)
            if(res && res.data) {
              this.model(res.data.id) //返回模板
              this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
              if(res.data.flag == 0) {
                this.$emit('updateInfo')
              }
            }
          }catch(error) {
            this.$message.error(error);
          }
          this.handleCancel()
          this.submitLoading = false;
        }
      })
    },

    //关闭编辑特征
    handleCancel() {
      this.$emit('closeOperationModal', 'edit-feature');
      this.form.resetFields(); //重置弹窗
    },

    //重置操作
    handleReset() {
      this.form.resetFields(); //重置弹窗
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-checkbox-group-item + .ant-checkbox-group-item {
    margin-top: 10px;
  }
</style>